<style>
    .mailbox-attachment-icon {
        max-height: none;
    }
    .mailbox-attachment-info {
        background: #fff;
    }
    .mailbox-attachments .img-thumbnail {
        border: 1px solid #fff;
        border-radius: 0;
        background-color: #fff;
    }
    .mailbox-attachment-icon.has-img>img {
        max-width: 100%!important;
        padding: 20px;
    }
    .mailbox-attachment-info .item {
        margin-bottom: 6px;
    }
    .mailbox-attachments li {
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
        border: 0;
        background: #fff;
        position: relative;
    }
    .mailbox-attachments li:hover .hover-display {
        display: inline;
    }

    body.dark-mode .table {
        background-color: #2c2c43;
    }
    body.dark-mode .mailbox-attachments .img-thumbnail {
        border-color: #223;
        background-color: #223;
    }
    body.dark-mode .mailbox-attachment-info {
        background: #223;
    }
    body.dark-mode .mailbox-attachments li {
        border-color: #223;
        background-color: #223;
    }
    body.dark-mode .mailbox-attachment-name {
        color: #a8a9bb
    }
    .mailbox-attachments li .install {
        padding: 5px 10px;
        background: #ea5455;
        color: #fff;
        border-radius: 3px;
        position: absolute;
        right: 0;
    }
    .mailbox-attachments li .install.ok {
        background: #409eff;
    }
</style>
<div class="ym-box custom-data-table dt-bootstrap4">

        @include('admin::grid.table-toolbar')

        {!! $grid->renderFilter() !!}

        {!! $grid->renderHeader() !!}

        <div class="table-responsive table-wrapper mt-1">
            <ul class="mailbox-attachments clearfix  p-0">
                @foreach($grid->rows() as $row)
                    <li>
                        @if($row->column('version') == 0)
                            <span class="install">未安装</span>
                        @else
                            <span class="install ok">已安装</span>
                        @endif
                        @if($row->type == 'application')
                            <span class="type" style="cursor: pointer;bottom: 130px;padding: 3px 10px;color: #ea5455; border-radius: 0 20px 20px 0;position: absolute;border: 1px dotted #ea5455;border-left: 0;">应用  </span>
                        @elseif($row->type == 'plugins')
                            <span class="type" style="cursor: pointer;bottom: 130px;padding: 3px 10px;color: #409eff; border-radius: 0 20px 20px 0;position: absolute;border: 1px dotted #409eff;border-left: 0;">插件  </span>
                        @elseif($row->type == 'theme')
                            <span class="type" style="cursor: pointer;bottom: 130px;padding: 3px 10px;color: #a7d630; border-radius: 0 20px 20px 0;position: absolute;border: 1px dotted #a7d630;border-left: 0;">主题  </span>
                        @endif
                        <span class="mailbox-attachment-icon has-img">
                        @if($row->logo)
                                <img data-action='preview-img' src='{!! $row->column('logo') !!}' style='max-width:40px;max-height:40px;cursor:pointer' class='img img-thumbnail' />
                            @else
                                <img data-action='preview-img' src='/static/images/default-avatar.jpg' style='cursor:pointer' class='img img-thumbnail' />
                            @endif
                    </span>
                        <div class="mailbox-attachment-info">
                            <div class="d-flex justify-content-between item">
                                <span class="mailbox-attachment-name">{!! $row->column('name') !!}</span>
                            </div>
                            <div class="d-flex justify-content-between item">
                                <span class="mailbox-attachment-name">{!! $row->column('authors') !!}</span>
                            </div>


                            <div class="d-flex justify-content-between item">
                                <span class="mailbox-attachment-name" style="color: #c3c3c3;font-weight: 400; font-size: 12px;">{!! $row->column('description') !!}</span>
                            </div>

                            <span class="d-flex justify-content-between" style="margin-top: 5px;">
                            <div>{!! $row->column('__actions__') !!}</div>

                        </span>
                        </div>
                    </li>
                    {{--                {!! $row->column('homepage') !!}--}}
                    {{--                {!! $row->column('name') !!}--}}
                    {{--                {!! $row->column('version') !!}--}}
                    {{--                {!! $row->column('type') !!}--}}
                    {{--                {!! $row->column('description') !!}--}}
                    {{--                {!! $row->column('authors') !!}--}}
                    {{--                {!! $row->column('enabled') !!}--}}
                    {{--                {!! $row->column('new_version') !!}--}}
                    {{--                {!! $row->column('__actions__') !!}--}}
                @endforeach
            </ul>
        </div>

        {!! $grid->renderFooter() !!}

        {{--    @include('admin::grid.table-pagination')--}}

    </div>


